<template>
  <div class="albumComment">
    <div class="submitComment">
      <el-form :model="commentForm" :rules="commentRules" ref="commentFormRef">
        <el-form-item prop="text">
          <el-input v-model="commentForm.text" type="textarea" placeholder="请输入你的评论" show-word-limit maxlength="140" resize="none"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" @click="sendComment">评论</el-button>
        </el-form-item>
      </el-form>
    </div>
    <p>精彩评论({{ total }})</p>
    <div :index="item.commentId" class="newComment" v-for="(item, index) in comments" :key="index">
      <div class="userComment">
        <div class="CommentContent">
          <div class="userImg">
            <img :src="item.user.avatarUrl" />
          </div>
          <div class="content">
            <div class="top">
              <a>{{ item.user.nickname }}：</a>
              <span>{{ item.content }}</span>
            </div>
            <div class="time"><span>{{ item.time | showDate }}</span></div>
          </div>
        </div>
        <div class="operate">
          <div class="operate_box">
            <span>
              <div class="like" @click="getCommentLike(item.commentId)">
                <i class="iconfont icon-dianzan" v-show="toggle"></i>
                <i class="iconfont icon-dianzan" style="color: red;" v-show="!toggle"></i>
              </div>
              ({{ item.likedCount }})</span>|
            <span>分享</span>|
            <span>回复</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewAlbumComment, sendComment } from '../../../network/playlist.js'
import { formatTime } from '../../common/util.js'
export default {
  data () {
    return {
      commentForm: {
        text: ''
      },
      text: '',
      id: 0,
      total: 0,
      comments: [],
      hotComments: [],
      toggle: true,
      // 评论表单验证规则对象
      commentRules: {
        // 验证内容是否合法
        text: [{
          required: true,
          message: '请输入评论内容',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 140,
          message: '长度为140个字符',
          trigger: 'blur'
        }
        ]
      }
    }
  },
  methods: {
    // 获取评论列表
    getNewAlbumComment (id) {
      getNewAlbumComment(id).then(res => {
        // console.log(res.data)
        this.total = res.data.total
        this.hotComments = res.data.hotComments
        this.comments = [...res.data.hotComments, ...res.data.comments]
        // console.log(this.comments)
      })
    },
    sendComment () {
      this.$refs.commentFormRef.validate(valid => {
        if (!valid) return
        sendComment(1, 2, this.id, this.commentForm.text).then(res => {
          // console.log(res.data)
        })
      })
    }
  },
  filters: {
    showDate: function (value) {
      const date = new Date(value)
      return formatTime(date, 'yyyy-MM-dd hh:mm')
    }
  },
  created () {
    this.id = parseInt(this.$route.params.id)
    this.getNewAlbumComment(this.id)
  }
}
</script>

<style lang="less" scoped>
  .albumComment {
    .submitComment {
      width: 100%;
      height: 150px;
      background-color: #f0f0f2;
    }
    p {
      margin-top: 30px;
      font-size: 20px;
      margin-bottom: 10px;
    }
    .newComment {
      width: 100%;
      border-top: 1px solid #efefef;
      padding: 20px 0;
      .userComment {
        display: flex;
        justify-content: space-between;
        .CommentContent {
          width: 82%;
          font-size: 14px;
          display: flex;
          flex-direction: row;
          .userImg {
            width: 50px;
            height: 50px;
            margin-right: 15px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .content {
            .top {
              margin-bottom: 10px;
              a {
                color: #0a63a8;
              }
            }
          }
        }
        .operate {
          width: 20%;
          color: #999999;
          font-size: 14px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .operate_box {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            span {
              padding: 0 10px;
              .like {
                float: left;
              }
              i {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
</style>

<style>
  .submitComment .el-textarea__inner {
    position: relative;
    width: 98%;
    height: 75px;
    margin: 10px 1% 0 1%;
  }
  .el-textarea .el-input__count {
    position: absolute;
    height: 15px;
    bottom: 16%;
    right: 1.3%;
  }
  .submitComment .el-button {
    float: right;
    margin-right: 1%;
  }
</style>
